<template>
  <div class="more_list">
    <el-dropdown trigger="click" @command="moreHandleCommand">
      <slot v-if="isSlot"></slot>
      <div v-else class="iconBox">
        <el-icon>
          <MoreFilled />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item class="Dropdown_item_menu" v-if="rowItem.type == 'file'" command="preview" :icon="View">
            {{ $t('teamDoc.rightBtnList.preview') }}
          </el-dropdown-item>
          <el-dropdown-item class="Dropdown_item_menu" :disabled="judgePermission('download')"
            v-if="rowItem.type == 'file'" :icon="EditPen" command="edit">
            {{ $t('teamDoc.rightBtnList.edit') }}
          </el-dropdown-item>
          <el-dropdown-item
            v-if="rowItem.type == 'file' && (rowItem.suffix == 'richText' || rowItem.suffix == 'doc' || rowItem.suffix == 'docx' || rowItem.suffix == 'xls' || rowItem.suffix == 'xlsx' || rowItem.suffix == 'pdf')"
            class="Dropdown_item_menu " :icon="Printer" command="print" :disabled="judgePermission('print')">
            {{ $t('teamDoc.rightBtnList.print') }}
          </el-dropdown-item>

          <el-dropdown-item class="Dropdown_item_menu border_bottom" :icon="Download"
            :disabled="judgePermission('download')" command="download">
            {{ $t('teamDoc.rightBtnList.download') }}
          </el-dropdown-item>
          <!-- ------------------------------------ -->
          <el-dropdown-item command="copy" :icon="DocumentCopy" :disabled="judgePermission('copy')"
            class="Dropdown_item_menu">
            {{ $t('teamDoc.rightBtnList.copy') }}
          </el-dropdown-item>

          <el-dropdown-item command="move" :disabled="judgePermission('move')" class="Dropdown_item_menu"
            :icon="Scissor">
            {{ $t('teamDoc.rightBtnList.move') }}
          </el-dropdown-item>

          <el-dropdown-item command="delete" :disabled="judgePermission('delete')" class="Dropdown_item_menu"
            :icon="Delete">
            {{ $t('teamDoc.rightBtnList.delete') }}
          </el-dropdown-item>


          <el-dropdown-item class="Dropdown_item_menu border_bottom" command="rename"
            :disabled="judgePermission('update')" :icon="Key">
            {{ $t('teamDoc.rightBtnList.rechristen') }}
          </el-dropdown-item>
          <!-- ------------------------------------ -->
          <el-dropdown-item v-if="pageType != 'self'" class="Dropdown_item_menu" command="attention">
            <svg-icon :icon-class="rowItem.attention == '0' ? 'like' : 'like-fill'"
              style="margin-right: 5px;"></svg-icon>
            {{ rowItem.attention == "1" ? $t('teamDoc.rightBtnList.cancelSubscription') :
              $t('teamDoc.rightBtnList.subscription') }}
          </el-dropdown-item>
          <el-dropdown-item class="Dropdown_item_menu" command="label" :disabled="judgePermission('label')" :icon="Collection">
            {{ $t('teamDoc.rightBtnList.teamTags') }}
          </el-dropdown-item>

          <el-dropdown-item class="Dropdown_item_menu" command="outEnjoy" :disabled="judgePermission('distribute')"
            :icon="MessageBox">
            {{ $t('teamDoc.rightBtnList.distribute') }}
          </el-dropdown-item>


          <el-dropdown-item class="Dropdown_item_menu border_bottom" command="enjoy"
            :disabled="judgePermission('share')" :icon="Share">
            {{ $t('teamDoc.rightBtnList.share') }}
          </el-dropdown-item>
          <el-dropdown-item v-if="pageType != 'self'" class="Dropdown_item_menu" :icon="Avatar" command="visitor"
            :disabled="judgePermission('jurisdiction')">
            <!-- 分配权限 -->
            {{ $t('teamDoc.rightBtnList.assignPermissions') }}
          </el-dropdown-item>


          <el-dropdown-item class="Dropdown_item_menu" command="">
            <el-dropdown placement="left-start" trigger="hover" @command="moreHandleCommand">
              <div class="el-dropdown-link personalization">
                <div style="display: flex; align-items: center">
                  <el-icon>
                    <MoreFilled />
                  </el-icon>
                  <span>{{ $t('teamDoc.rightBtnList.more') }}</span>
                </div>
                <el-icon>
                  <CaretRight />
                </el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="Dropdown_item_menu" v-if="rowItem.type == 'file'" :icon="User"
                    command="templateLibrary">
                    {{ $t('teamDoc.rightBtnList.personalTemplateLibrary') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" v-if="rowItem.type == 'file'"
                    command="publicTemplateLibrary" :icon="FullScreen">
                    {{ $t('teamDoc.rightBtnList.commonTemplateLibrary') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="enterpriseLabel" :icon="Plus">
                    {{ $t('teamDoc.rightBtnList.submitEnterprise') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-dropdown-item>

          <!-- ------------------------------------ -->
          <!-- <el-dropdown-item class="Dropdown_item_menu" command="">
            <el-dropdown placement="left-start" trigger="hover" @command="moreHandleCommand">
              <div class="el-dropdown-link personalization">
                <div>
                  <el-icon><MoreFilled /></el-icon>
                  <span>{{ $t('teamDoc.rightBtnList.more') }}</span>
                </div>
                <el-icon><CaretRight /></el-icon>
              </div>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="Dropdown_item_menu" :icon="Plus" command="submitFileToTeam">
                    提交到团队
                    {{ $t('teamDoc.rightBtnList.commitTeam') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="enterRoom" :disabled="judgePermission('commitEnterprise')" :icon="Plus">
                    {{ $t('teamDoc.rightBtnList.submitEnterprise') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu_more" :icon="CirclePlus" command="joinTemplates">
                    {{ $t('teamDoc.rightBtnList.joinTemplates') }}
                    <el-icon><CaretRight /></el-icon>
                    <div class="info">
                      <p @click="moreHandleCommand('templateLibrary', rowItem)">{{ $t('teamDoc.rightBtnList.personalTemplateLibrary') }}</p>
                      <p @click="moreHandleCommand('publicTemplateLibrary', rowItem)">{{ $t('teamDoc.rightBtnList.commonTemplateLibrary') }}</p>
                    </div>
                  </el-dropdown-item>

                  第一句打开时注释了
                  <el-dropdown-item class="Dropdown_item_menu" :icon="Sort" v-if="proxy.$yuUtils.LicenseInfoFunc('ferry:list')" command="ferryFile">
                  <el-dropdown-item class="Dropdown_item_menu" :icon="Sort" command="ferryFile">
                    {{ $t('teamDoc.rightBtnList.inOut') }}
                  </el-dropdown-item>

                  <el-dropdown-item class="Dropdown_item_menu" command="invitationEdit" :icon="Link">
                    {{ $t('teamDoc.rightBtnList.inviteCollaboration') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-dropdown-item> -->
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import {
  User,
  FullScreen,
  View,
  EditPen,
  Download,
  DocumentCopy,
  Scissor,
  Delete,
  Key,
  Collection,
  MessageBox,
  Printer,
  Share,
  Plus,
  Avatar,
  CirclePlus,
  Sort,
  Link,
  CaretRight
} from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance() as any
import { useTeamRoleStore } from '@/store/modules/teamRole'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const teamRoleStore = useTeamRoleStore()
const { teamId } = proxy.$route.query
const props = defineProps({
  pageType: {
    // self:个人,team:团队,enterprise:企业
    type: String,
    default: ''
  },
  rowItem: {
    type: Object,
    default: () => {
      return {}
    }
  },
  isSlot: {
    type: Boolean,
    default: false
  },
  roleData: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const MoreListLoading = ref(false)
const emit = defineEmits(['moreHandleCommand'])
/*更多*/
const moreHandleCommand = (command) => {
  emit('moreHandleCommand', command, props.rowItem)

  if (command == 'attention') {
    props.rowItem.attention == 0 ? (props.rowItem.attention = 1) : (props.rowItem.attention = 0)
  }
}

/**权限控制 */
const judgePermission = (str) => {

  return !proxy.$yuUtils.documentsPermissionFunc([str], props.roleData)
}


onMounted(() => {
  // getPermission()
  // console.log(props.rowItem, '拿到的数据0000');
})
</script>

<style scoped lang="scss">
.more_list {
  .iconBox {
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }

    &:focus {
      visibility: visible;
      color: #6698ff;
      background: rgba(102, 152, 255, 0.1);
    }
  }
}

:deep(.Dropdown_item_menu) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 14px !important;

  &:hover {
    background-color: #f5f5f5 !important;
    color: #606266;
  }
}

:deep(.Dropdown_item_menu_more) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 14px !important;
  box-sizing: border-box;
  position: relative !important;

  .info {
    display: none;
  }

  &:hover {
    .info {
      display: block;
      position: absolute !important;
      left: 120px;
      top: -50%;
      width: 100px;
      height: 100px;
      background-color: white;
      padding: 10px 0px;

      p {
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 35px;

        &:hover {
          background-color: #f5f5f5 !important;
          color: #606266;
        }
      }
    }

    background-color: #f5f5f5 !important;
    color: #606266;
  }
}

:deep(.border_bottom) {
  border-bottom: 1px solid #dcdfe6 !important;
}

.personalization {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #606266 !important;
}
</style>
